<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <button @click="num0-=5">-</button>
        <mybox a="无论怎么讲，会战兵力是" :b="num0" c="万对60万,优势在我"></mybox>
        <button @click="num++">+</button>
        <myheader s="吃了" :a="num" title="块" lao="蛋糕"></myheader>
    </div>
</body>
<script src="vue.global.js"></script>
<script>
const {createApp,ref,computed}=Vue
const app=createApp({
    setup(){
        let num0=ref(80)
        let num= ref(1)
        return{
            num0,num
        }
    }

})
app.component('mybox',{
    props:{
        a:String,
        b:{type:Number,
            validator:function(value){
                if(value<=60){
                    alert("错误，优势不在我了")
                    return false
                }else{
                    return true
                }
            }
        },
        c:String,
        
            
        
    },
    setup(props){
        let a=props.a
        let b=computed(()=>{
            return props.b
        })
        let c=props.c

        return{
            a,b,c

        }
    },
    template:`<div id="box">
            <p>{{a}}{{b}}{{c}}</p>
            
        </div>`
})
app.component('myheader',{
    props:{
        s:String,
        a:{type:Number,
            validator(value){
                if(value>=10){
                    alert("吃撑了")
                    return false
                }else{
                    return true
                }
            }
        },
        title:String,
        lao:String,
        
    },
    setup(props){
        let s=props.s
        let title=props.title
        let lao=props.lao
    let a =computed(function(){
        return  props.a
    })
    return{
        a,s,title,lao
    }
    },
    template:`<div class="box">{{s}}{{a}}{{title}}{{lao}}</div>`,
  })
app.mount("#app")
</script>
</html>